<template>
    <div class="electricity-price-chart">
        <div class="chart-container">
            <!-- 尖时段 -->
            <div class="chart-row">
                <div class="chart-label">{{ labels.sharp || '尖' }}</div>
                <div class="chart-timeline">
                    <div class="time-line sharp-line">
                        <div v-for="hour in sharpTimeRanges" :key="`sharp-${hour.start}`" class="time-range"
                            :style="{ left: `${hour.start * 4.166}%`, width: `${(hour.end - hour.start) * 4.166}%` }">
                            <div class="time-dots">
                                <div v-for="h in getHoursInRange(hour.start, hour.end)" :key="`dot-${h}`"
                                    class="time-dot sharp-dot"
                                    :style="{ left: `${(h - hour.start + 0.5) * 100 / (hour.end - hour.start)}%` }">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="price-label">{{ priceData.sharp }} {{ priceUnit }}</div>
                </div>
            </div>

            <!-- 峰时段 -->
            <div class="chart-row">
                <div class="chart-label">{{ labels.peak || '峰' }}</div>
                <div class="chart-timeline">
                    <div class="time-line peak-line">
                        <div v-for="hour in peakTimeRanges" :key="`peak-${hour.start}`" class="time-range"
                            :style="{ left: `${hour.start * 4.166}%`, width: `${(hour.end - hour.start) * 4.166}%` }">
                            <div class="time-dots">
                                <div v-for="h in getHoursInRange(hour.start, hour.end)" :key="`dot-${h}`"
                                    class="time-dot peak-dot"
                                    :style="{ left: `${(h - hour.start + 0.5) * 100 / (hour.end - hour.start)}%` }">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="price-label">{{ priceData.peak }} {{ priceUnit }}</div>
                </div>
            </div>

            <!-- 平时段 -->
            <div class="chart-row">
                <div class="chart-label">{{ labels.normal || '平' }}</div>
                <div class="chart-timeline">
                    <div class="time-line normal-line">
                        <div v-for="hour in normalTimeRanges" :key="`normal-${hour.start}`" class="time-range"
                            :style="{ left: `${hour.start * 4.166}%`, width: `${(hour.end - hour.start) * 4.166}%` }">
                            <div class="time-dots">
                                <div v-for="h in getHoursInRange(hour.start, hour.end)" :key="`dot-${h}`"
                                    class="time-dot normal-dot"
                                    :style="{ left: `${(h - hour.start + 0.5) * 100 / (hour.end - hour.start)}%` }">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="price-label">{{ priceData.normal }} {{ priceUnit }}</div>
                </div>
            </div>

            <!-- 谷时段 -->
            <div class="chart-row">
                <div class="chart-label">{{ labels.valley || '谷' }}</div>
                <div class="chart-timeline">
                    <div class="time-line valley-line">
                        <div v-for="hour in valleyTimeRanges" :key="`valley-${hour.start}`" class="time-range"
                            :style="{ left: `${hour.start * 4.166}%`, width: `${(hour.end - hour.start) * 4.166}%` }">
                            <div class="time-dots">
                                <div v-for="h in getHoursInRange(hour.start, hour.end)" :key="`dot-${h}`"
                                    class="time-dot valley-dot"
                                    :style="{ left: `${(h - hour.start + 0.5) * 100 / (hour.end - hour.start)}%` }">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="price-label">{{ priceData.valley }} {{ priceUnit }}</div>
                </div>
            </div>

            <!-- 时间轴 -->
            <div class="chart-row time-label-row">
                <div class="chart-label"></div>
                <div class="chart-timeline">
                    <div v-for="hour in 25" :key="`time-${hour - 1}`" class="time-label"
                        :style="{ left: `${(hour - 1) * 4.166}%` }">
                        {{ hour - 1 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ElectricityPriceChart',
    props: {
        // 电价数据
        prices: {
            type: Object,
            default: () => ({
                sharp: '1.20000',  // 尖时电价
                peak: '0.81865',   // 峰时电价
                normal: '0.53257', // 平时电价
                valley: '0.24649', // 谷时电价
            })
        },
        // 时段小时数组
        hours: {
            type: Object,
            default: () => ({
                sharpHours: [], // 尖时段，默认为空
                peakHours: [8, 9, 10, 11, 16, 17, 18, 19, 20, 21],
                normalHours: [7, 12, 13, 14, 22, 23],
                valleyHours: [0, 1, 2, 3, 4, 5, 6, 15]
            })
        },
        // 标签文本
        labels: {
            type: Object,
            default: () => ({
                sharp: '尖',
                peak: '峰',
                normal: '平',
                valley: '谷'
            })
        },
        // 价格单位
        priceUnit: {
            type: String,
            default: '元/kWh'
        },
        // 自定义样式
        customColors: {
            type: Object,
            default: () => ({
                sharp: '#FF5252', // 红色
                peak: '#ffc107',  // 黄色
                normal: '#63c5da',// 蓝色
                valley: '#4caf50' // 绿色
            })
        }
    },
    data() {
        return {
            priceData: {
                sharp: '',
                peak: '',
                normal: '',
                valley: ''
            }
        };
    },
    computed: {
        // 计算连续时间段
        sharpTimeRanges() {
            return this.convertToTimeRanges(this.hours.sharpHours || []);
        },
        peakTimeRanges() {
            return this.convertToTimeRanges(this.hours.peakHours || []);
        },
        normalTimeRanges() {
            return this.convertToTimeRanges(this.hours.normalHours || []);
        },
        valleyTimeRanges() {
            return this.convertToTimeRanges(this.hours.valleyHours || []);
        }
    },
    watch: {
        prices: {
            handler(newValue) {
                this.priceData = { ...newValue };
            },
            immediate: true,
            deep: true
        },
        customColors: {
            handler(newValue) {
                // 动态设置CSS变量
                if (newValue.sharp) {
                    document.documentElement.style.setProperty('--sharp-color', newValue.sharp);
                }
                if (newValue.peak) {
                    document.documentElement.style.setProperty('--peak-color', newValue.peak);
                }
                if (newValue.normal) {
                    document.documentElement.style.setProperty('--normal-color', newValue.normal);
                }
                if (newValue.valley) {
                    document.documentElement.style.setProperty('--valley-color', newValue.valley);
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        // 辅助函数：将离散小时转换为连续时间段
        convertToTimeRanges(hours) {
            if (!hours || hours.length === 0) return [];

            // 先排序
            const sortedHours = [...hours].sort((a, b) => a - b);
            const ranges = [];

            let start = sortedHours[0];
            let end = start;

            for (let i = 1; i < sortedHours.length; i++) {
                if (sortedHours[i] === end + 1) {
                    // 连续的小时，扩展当前范围
                    end = sortedHours[i];
                } else {
                    // 不连续，创建新范围
                    ranges.push({ start, end: end + 1 });
                    start = sortedHours[i];
                    end = start;
                }
            }

            // 添加最后一个范围
            ranges.push({ start, end: end + 1 });

            return ranges;
        },

        // 获取范围内的所有小时（包含开始，不包含结束）
        getHoursInRange(start, end) {
            const hours = [];
            for (let i = start; i < end; i++) {
                hours.push(i);
            }
            return hours;
        }
    }
};
</script>

<style lang="scss" scoped>
:root {
    --sharp-color: #FF5252;
    --peak-color: #ffc107;
    --normal-color: #63c5da;
    --valley-color: #4caf50;
}

.electricity-price-chart {
    width: 100%;
    margin: 0 auto;

    .chart-container {
        border-radius: 4px;
        padding: var(--gap-normal);
        padding-right: 40px;
    }

    .chart-row {
        display: flex;
        align-items: center;
        margin-bottom: var(--gap-normal);
        position: relative;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .chart-label {
        width: 40px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .chart-timeline {
        flex: 1;
        position: relative;
        height: 30px;
        margin-right: 80px;
        border-bottom: 1px solid #ebeef5;
    }

    .time-line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 2px;
        width: 100%;
    }

    .sharp-line {
        background-color: transparent;
    }

    .peak-line {
        background-color: transparent;
    }

    .normal-line {
        background-color: transparent;
    }

    .valley-line {
        background-color: transparent;
    }

    .time-range {
        position: absolute;
        height: 100%;

        .time-dots {
            position: relative;
            width: 100%;
            height: 100%;
        }
    }

    .time-dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .sharp-dot {
        background-color: var(--sharp-color, #FF5252);
    }

    .peak-dot {
        background-color: var(--peak-color, #ffc107);
    }

    .normal-dot {
        background-color: var(--normal-color, #63c5da);
    }

    .valley-dot {
        background-color: var(--valley-color, #4caf50);
    }

    .price-label {
        position: absolute;
        right: -70px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
        width: 70px;
        text-align: left;
    }

    .time-label-row {
        margin-top: 30px;

        .chart-timeline {
            border-bottom: none;
        }
    }

    .time-label {
        position: absolute;
        font-size: 12px;
        transform: translateX(-50%);
        top: -20px;
        color: #909399;
    }
}
</style>